<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fd3</title>
    <script src="bower_components/d3/d3.js"></script>
    <script src="bower_components/fd3/jquery.js"></script>
    <script src="bower_components/fd3/fd3.js"></script>
</head>
<body>
<button onclick="reset()">random</button>
<div id='main' style="width: 1000px;height: 300px;margin:10px;">

</div>

<style>
    .test{
        border: 1px solid #000;
        display: inline-block;
    }
</style>
<div class="test">
    asdfas
</div>

<script>
    var chart = fd3.init(document.querySelector('#main'));

    var options = {
            series:[
                {
                    name:'测试1',
                    type:'line',
                    data:[10,30,40,10,70],
                    strokeWidth:1
                },
                {
                    name:'测试2',
                    type:'line',
                    data:[10,30,40,10,70],
                    strokeWidth:1
                }

            ],
        interpolate:'linear', //cardinal monotone
        color:['#2EC7C9','#B6A2DE'],
        yAxis: {
            type:'value',
            label:{
                content:'我是Y轴',
                fontSize:'10',
                color:'blue'
            },
            text:{
              fontSize:'14',
                color:'#000',
            },
            units:'C',
            orient:'left'
        },
        xAxis: {
            type:'category',
            label:{
                content:'我是X轴',
                fontSize:'10',
                color:"red"
            },
            units:'C',
            data:['a','b','c','d','e']
        }
    }
    chart.loadConfig(options);

    var x=['a','b','c','d','e','f','g','h','i','j','k','l','m','n'];


//    setInterval(function(){
//        $('button').text(options.series.length);
//        for(var i=0;i<100;i++){
//            options.series.push({name:'测试2', type:'line', data:[30,10,50,20,40], strokeWidth:2});
//        }
//        reset();
//    },1000);
    chart.duration=100;
//    setInterval(function(){
//        $('button').text(options.series[0].data.length);
//        for(var i=0;i<50;i++){
//            for(var j=0;j<options.series.length;j++){
//                options.series[j].data.push(Math.random()*100);
//            }
//            options.xAxis.data.push(options.series[0].data.length);
//        }
//        chart.loadConfig(options);
//    },1000);

//    for(var i=0;i<30;i++){
//        for(var j=0;j<options.series.length;j++){
//            options.series[j].data.push(Math.random()*10+100);
//        }
//        options.xAxis.data.push(options.series[0].data.length);
//    }
//    chart.loadConfig(options);

    function reset(){

        var len = Math.floor(Math.random()* (x.length-1))+1;
        options.xAxis.data= x.slice(0,len);
        for(var j=0;j<options.series.length;j++){
            options.series[j].data=[];
        }
        for(var i= 0;i<len;i++){
            for(var j=0;j<options.series.length;j++){
                options.series[j].data.push(Math.random()*100);
            }
            }

        chart.loadConfig(options);
    }
</script>
</body>
</html>